<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目编码" prop="itemCode">
        <el-input
          v-model="queryParams.itemCode"
          placeholder="请输入项目编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目名称" prop="itemName">
        <el-input
          v-model="queryParams.itemName"
          placeholder="请输入项目名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目类型" prop="itemType">
        <el-select v-model="queryParams.itemType" placeholder="请选择项目类型" clearable>
          <el-option
            v-for="dict in dict.type.dime_comb_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="判断方式" prop="judgeType">
        <el-select v-model="queryParams.judgeType" placeholder="请选择判断方式" clearable>
          <el-option
            v-for="dict in dict.type.dime_item_judgetype"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="排序" prop="sn">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.sn"-->
      <!--          placeholder="请输入排序"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="启用" prop="isValid">
        <!--        <el-radio-group v-model="queryParams.isValid">-->
        <!--          <el-radio :label="1">是</el-radio>-->
        <!--          <el-radio :label="0">否</el-radio>-->
        <!--        </el-radio-group>-->
        <el-switch v-model="queryParams.isValid"
                   active-color="#13ce66"
                   inactive-color="#ff4949"
                   :active-value="1"
                   :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['basic:baseitem:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['basic:baseitem:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['basic:baseitem:remove']"
        >禁用
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['basic:baseitem:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-search"
          size="mini"
          :disabled="single"
          @click="searchDescribe"
        >查看描述
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="baseitemList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45" align="center"/>
      <el-table-column label="项目编码" width="125" align="center" prop="itemCode"/>
      <el-table-column label="项目名称" width="125" align="center" prop="itemName"/>
      <el-table-column label="项目类型" width="100" align="center" prop="itemType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.dime_comb_type" :value="scope.row.itemType"/>
        </template>
      </el-table-column>
      <el-table-column label="判断方式" align="center" prop="judgeType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.dime_item_judgetype" :value="scope.row.judgeType"/>
        </template>
      </el-table-column>
      <el-table-column label="最大值" align="center" prop="valmax"/>
      <el-table-column label="最小值" align="center" prop="valmin"/>
      <el-table-column label="标准值" align="center" prop="valStandard"/>
      <el-table-column label="默认值" align="center" prop="valDefault"/>
      <el-table-column label="单位" align="center" prop="unit"/>
      <el-table-column label="排序" align="center" prop="sn" width="50"/>
      <el-table-column label="偏低描述" align="center" prop="lwstr"/>
      <el-table-column label="偏高描述" align="center" prop="histr"/>
      <!--      <el-table-column label="主检显示" align="center" prop="showMaincheck" />-->
      <!--      <el-table-column label="显示名称" align="center" prop="showitemName" />-->
      <!--      <el-table-column label="特殊项目" align="center" prop="specialitem" />-->
      <el-table-column label="计算公式" align="center" prop="formula"/>
      <el-table-column label="启用" align="center">
        <!--        <template slot-scope="scope">{{-->
        <!--            scope.row.isValid ? "是" : "否"-->
        <!--          }}</template> -->
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isValid"
                     active-color="#13ce66"
                     inactive-color="#ff4949"
                     :active-value="1"
                     :inactive-value="0"
                     disabled
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['basic:baseitem:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['basic:baseitem:remove']"
          >禁用
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="searchDescribe(scope.row)"
            v-hasPermi="['basic:baseitem:remove']"
          >查看描述
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改体检细项管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="项目编码" prop="itemCode">
              <el-input v-model="form.itemCode" placeholder="请输入项目编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="itemName">
              <el-input v-model="form.itemName" placeholder="请输入项目名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="项目类型" prop="itemType">
              <el-select v-model="form.itemType" placeholder="请选择项目类型" clearable style="width: 100%">
                <el-option
                  v-for="dict in dict.type.dime_comb_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="判断方式" prop="judgeType">
              <el-select v-model="form.judgeType" placeholder="判断方式" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.dime_item_judgetype"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="最小值" prop="valmin">
              <el-input v-model="form.valmin" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大值" prop="valmax">
              <el-input v-model="form.valmax" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="标准值" prop="valStandard">
              <el-input v-model="form.valStandard" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认值" prop="valDefault">
              <el-input v-model="form.valDefault" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入单位"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序：" prop="sn">
              <el-input v-model="form.sn" @input="(v)=>(form.sn=v.replace(/[^\d]/g,''))" maxlength="8"
                        placeholder="请输入排序"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="偏低描述" prop="lwstr">
              <el-input v-model="form.lwstr" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="偏高描述" prop="histr">
              <el-input v-model="form.histr" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="启用" prop="isValid">
              <!--              <el-radio-group v-model="form.isValid">-->
              <!--                <el-radio :label="1">是</el-radio>-->
              <!--                <el-radio :label="0">否</el-radio>-->
              <!--              </el-radio-group>-->
              <el-switch v-model="form.isValid"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
                         :active-value="1"
                         :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">

          <el-col :span="24">
            <el-form-item label="计算公式" prop="formula">
              <el-input v-model="form.formula" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-left: 5px;margin-bottom:40px">
          <el-tabs v-model="activeName" style="height: 200px">
            <el-tab-pane label="项目特殊标准值" name="first">
              <div class="button-container" align="right">
                <el-button
                  class="filter-item"
                  size="mini"
                  plain
                  type="primary"
                  icon="el-icon-plus"
                  @click="handleCreateItemextend"
                >新增
                </el-button>
                <el-button
                  class="filter-item"
                  size="mini"
                  plain
                  type="danger"
                  icon="el-icon-delete"
                  :disabled="multipleSelection"
                  @click="handleMultpleDeleteItemExtend"
                >批量删除
                </el-button>
              </div>
              <el-table
                border
                stripe
                :data="form.dimeBaseitemextendList"
                :row-class-name="tableRowClassName"
                size="small"
                height="200px"
                style="width: 99%; margin-left: 4px"
                @selection-change="handleExtendSelectionChange"
              >
                <!--                <el-table-column label="细项名称" align="center" prop="combId" width="200">-->
                <!--                  <template slot-scope="scope">-->
                <!--                    <el-select v-model="scope.row.combId" filterable placeholder="请选择项目" clearable>-->
                <!--                      <el-option-->
                <!--                          v-for="item in basecombList"-->
                <!--                          :key="item.id"-->
                <!--                          :label="item.combName"-->
                <!--                          :value="item.id"-->
                <!--                      ></el-option>-->
                <!--                    </el-select>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column type="selection" width="40" align="center"/>
                <el-table-column label="性别" width="180" align="center" prop="sex">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.sex" placeholder="请选择适用性别" style="width:100%">
                      <el-option
                        v-for="dict in dict.type.sys_user_sex"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="最大年龄" width="180" align="center" prop="maxage">
                  <template slot-scope="scope">
                    <el-input-number
                      size="mini"
                      v-model="scope.row.maxage"
                      :min="0"
                      :max="100"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="最小年龄" width="180" align="center" prop="minage">
                  <template slot-scope="scope">
                    <el-input-number
                      size="mini"
                      v-model="scope.row.minage"
                      :min="0"
                      :max="100"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="修正值" width="180" align="center" prop="correctionvalue">
                  <template slot-scope="scope">
                    <el-input-number
                      size="mini"
                      v-model="scope.row.correctionvalue"
                      :min="0"
                      :max="100"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.remark"
                      size="mini"
                      type="text"
                      clearable
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="danger"
                      size="mini"
                      icon="el-icon-delete"
                      @click="handleDeleteItemExtend(scope.$index)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listBaseitem, getBaseitem, delBaseitem, addBaseitem, updateBaseitem} from "@/api/basic/baseitem";
import {listBaseitemextend} from "@/api/basic/baseitemextend";


export default {
  name: "Baseitem",
  dicts: ['dime_item_judgetype', 'dime_comb_type', 'sys_user_sex'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 特殊项多选
      multipleSelection: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 体检细项管理表格数据
      baseitemList: [],
      // 项目特殊标准值表格数据
      baseitemextendList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemCode: null,
        itemName: null,
        judgeType: null,
        valmax: null,
        valmin: null,
        valStandard: null,
        valDefault: null,
        unit: null,
        sn: null,
        lwstr: null,
        histr: null,
        isValid: 1
      },
      // 表单参数
      form: {},
      //默认
      activeName: "first",
      // 表单校验
      rules: {
        itemCode: [
          {required: true, message: "项目编码不能为空", trigger: "blur"}
        ],
        itemName: [
          {required: true, message: "项目名称不能为空", trigger: "blur"}
        ],
        itemType: [
          {required: true, message: "项目类型不能为空", trigger: "change"}
        ],
        judgeType: [
          {required: true, message: "判断方式不能为空", trigger: "change"}
        ],
      }
    };
  },
  created() {
    this.getList();
    listBaseitemextend({
      pageNum: 1,
      pageSize: 200
    }).then(response => {
      this.baseitemextendList = response.rows;
    })
  },
  methods: {
    /** 查询体检细项管理列表 */
    getList() {
      this.loading = true;
      listBaseitem(this.queryParams).then(response => {
        this.baseitemList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        itemCode: null,
        itemName: null,
        itemType: null,
        judgeType: null,
        valmax: null,
        valmin: null,
        valStandard: null,
        valDefault: null,
        unit: null,
        sn: null,
        lwstr: null,
        histr: null,
        interfaceCode: null,
        interfaceName: null,
        interfaceMethod: null,
        deviceName: null,
        remark: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        isValid: null,
        showMaincheck: null,
        showitemName: null,
        specialitem: null,
        formula: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //row-class-name添加下标
    tableRowClassName(row,index){
      row.row.index = row.rowIndex;
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 多选框选中数据(特殊值)
    handleExtendSelectionChange(rows) {
      this.selectedList = [];
      rows.forEach(item =>{
        this.selectedList.push(item.index)
      })
      this.multipleSelection = !this.selectedList.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.form.isValid = 1;
      this.form.dimeBaseitemextendList = [];
      this.title = "添加体检细项管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getBaseitem(id).then(response => {
        this.form.dimeBaseitemextendList = response.data.dimeBaseitemextendList;
        this.form = response.data;
        this.open = true;
        this.title = "修改体检细项管理";
      });
    },

    handleCreateItemextend() {
      let newValue = {
        id: "",
        baseItemId: "",
        baseItemName: "",
        baseItemCode: "",
        sex: "",
        maxage: "",
        minage: "",
        correctionvalue: "",
        remark: ""
      };
      //添加新的行数
      this.form.dimeBaseitemextendList.push(newValue);
    },

    //删除特殊项
    handleDeleteItemExtend(index) {
      this.$modal.confirm('是否确认删除该数据项？').then(() => {
        this.form.dimeBaseitemextendList.splice(index, 1);
        return this.$modal.msgSuccess("删除成功");
      })
    },

    //过滤相同项
    filterHasSameArr(arr1,arr2){
      return arr1.filter((item,index) => !arr2.includes(index));
    },

    //批量删除特殊项
    handleMultpleDeleteItemExtend() {
      this.$modal.confirm('是否确认批量删除数据项？').then(() => {
        this.form.dimeBaseitemextendList = this.filterHasSameArr(this.form.dimeBaseitemextendList,this.selectedList);
        return this.$modal.msgSuccess("删除成功");
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBaseitem(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBaseitem(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 禁用按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认禁用体检细项管理编号为"' + ids + '"的数据项？').then(function () {
        return delBaseitem(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("禁用成功");
      }).catch(() => {
      });
    },
    /** 查看描述操作 */
    searchDescribe(row) {
      const id = row.id || this.ids[0]
      this.$router.push({
        path: '/company/baseitemdescribe',
        query: {
          itemId: id
        }
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('basic/baseitem/export', {
        ...this.queryParams
      }, `baseitem_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
